<template>
  <div class="note-editor">
    <HomeTop style="position: sticky;top: 0; z-index: 99;" />
    <div class="editor-container">
      <!-- 文本编辑器 -->
      <div class="show">
        <mavon-editor v-model="this.pageData.content" :language="language" :font-size="fontSize"
          :scroll-style="scrollStyle" :box-shadow="boxShadow" :box-shadow-style="boxShadowStyle"
          :transition="transition" :toolbars-background="toolbarsBackground" :preview-background="previewBackground"
          :subfield="subfield" :default-open="defaultOpen" :placeholder="placeholder" :editable="editable"
          :code-style="codeStyle" :toolbars-flag="toolbarsFlag" :navigation="navigation" :short-cut="shortCut"
          :autofocus="autofocus" :ishljs="ishljs" :image-filter="imageFilter" :image-click="imageClick"
          :tab-size="tabSize" :html="html" :xss-options="xssOptions" :toolbars="toolbars" @change="handleChange"
          @imgAdd="handleImageAdd" @imgDel="handleImageDelete"></mavon-editor>
      </div>
    </div>
  </div>
</template>






<script>
import HomeTop from '@/components/HomeTop.vue'
import Vue from "vue";
import request from "@/utils/request";
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";
Vue.component("mavon-editor", mavonEditor);
import { baseURL, imageURL } from "@/utils/request";
import { jump } from "@/utils/commonFunction";
export default {
  name: 'NoteEditor',
  components: {
        HomeTop,
    },
  data() {
    return {
      id: null,
      pageData: {

      },

      language: "zh-CN", //语言选择，暂支持 zh-CN: 简体中文, zh-TW: 正体中文 ， en: 英文 ， fr: 法语， pt-BR: 葡萄牙语， ru: 俄语， de: 德语， ja: 日语 |
      fontSize: "14px", //编辑区域文字大小
      scrollStyle: true, // 开启滚动条样式(暂时仅支持chrome)
      boxShadow: true, // 开启边框阴影
      boxShadowStyle: "0 2px 12px 0 rgba(0, 0, 0, 0.1)", // 边框阴影样式
      transition: true, // 是否开启过渡动画
      toolbarsBackground: "#ffffff", // 工具栏背景颜色
      previewBackground: "#fbfbfb", // 预览框背景颜色
      subfield: false, // true： 双栏(编辑预览同屏)， false： 单栏(编辑预览分屏)
      defaultOpen: "preview", // 在单栏（`subfield=false`）时默认展示区域. edit： 默认展示编辑区域， preview： 默认展示预览区域 其他 = edit
      placeholder: "开始编辑...", // 输入框为空时默认提示文本
      editable: false, // 是否允许编辑
      codeStyle: "code-github", // markdown样式： 默认github, [可选配色方案](/mavonEditor/src/lib/core/hljs/lang.hljs.css.js)
      toolbarsFlag: true, // 工具栏是否显示
      navigation: false, // 默认展示目录
      shortCut: true, // 是否启用快捷键
      autofocus: true, // 自动聚焦到文本框
      ishljs: true, // 代码高亮
      imageFilter: null, // 图片过滤函数，参数为一个`File Object`，要求返回一个`Boolean`, `true`表示文件合法，`false`表示文件不合法
      imageClick: null, // 图片点击事件，默认为预览，可覆盖
      tabSize: "\t", // tab转化为几个空格，默认为\t
      html: true, // 启用HTML标签，因为历史原因这个标记一直默认为true，但建议不使用HTML标签就关闭它，它能彻底杜绝安全问题。
      xssOptions: {}, // xss规则配置, 默认开启，设置false可以关闭，开启后会对HTML标签进行过滤，默认过滤所有HTML标签属性，建议按需配置白名单减少被攻击的可能。- 自定义规则参考: [https://jsxss.com/zh/options.html](https://jsxss.com/zh/options.html)- 参考DEMO: [dev-demo](/mavonEditor/src/dev/editor.vue)
      toolbars: {  // 工具栏显示那些工具
        bold: false, // 粗体
        italic: false, // 斜体
        header: false, // 标题
        underline: false, // 下划线
        strikethrough: false, // 中划线
        mark: false, // 标记
        superscript: false, // 上角标
        subscript: false, // 下角标
        quote: false, // 引用
        ol: false, // 有序列表
        ul: false, // 无序列表
        link: false, // 链接
        imagelink: false, // 图片链接
        code: false, // code
        table: false, // 表格
        fullscreen: false, // 全屏编辑
        readmodel: false, // 沉浸式阅读
        htmlcode: false, // 展示html源码
        help: false, // 帮助
        /* 1.3.5 */
        undo: false, // 上一步
        redo: false, // 下一步
        trash: false, // 清空
        save: false, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: false, // 导航目录
        /* 2.1.8 */
        alignleft: false, // 左对齐
        aligncenter: false, // 居中
        alignright: false, // 右对齐
        /* 2.2.1 */
        subfield: false, // 单双栏模式
        preview: false, // 预览
      },
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.getData();
  },
  methods: {
    getData() {
      request.get(`/article?id=${this.id}`).then(res => {
        this.pageData = res.data
        document.title = this.pageData.title
      })
    },
    async handleImageAdd(pos, file) {
      console.log(pos);
      let entireUrl = null;
      try {
        // 创建FormData对象并添加文件
        let formData = new FormData();
        formData.append('image', file);

        // 发送图片到服务器
        axios.post(baseURL + 'upload/image', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }).then(response => {
          entireUrl = imageURL + response.data;
          console.log("entireUrl:", entireUrl);
          this.$refs.myEditor.$img2Url(pos, entireUrl);
        }).catch(err => {
          console.error('上传失败:', err);
        });
      } catch (error) {
        console.error('图片上传失败', error);
      }
    },
    handleImageDelete(pos, imgFile) {
      console.log("删除图片，位置:", pos);
      console.log("图片文件:", imgFile);
      var url = pos[0]
      url = url.replace(imageURL, "")
      request.delete(`upload/image/${url}`).then(res => {
        console.log(res);
      })
    },
    handleChange(value, render) {
      // 定义正则表达式
      var regex = /!\[([^\[\]]+)\]\(([^)]+)\)/g;
      this.contentArray[this.index] = value.match(regex);
      var curImage = this.contentArray[this.index]
      var preImage = this.contentArray[(this.index + 1) % 2]
      this.index = (this.index + 1) % 2
      console.log(curImage);
      console.log(preImage);
      //新增的图片
      console.log(this.difference(curImage, preImage));
      //删除的图片
      console.log(this.difference(preImage, curImage));
    },
  },
};
</script>
<style scoped>
.show{
  position: relative;
  z-index: 0;
  padding: 0 20vw;
}
.note-editor{
  background: linear-gradient(to bottom, #e8f5e9, #ffffff);
}
</style>